<template>
  <div class="addInviteConfig">
    <h2 class="editPage">{{ id?'修改':'新增' }}</h2>
    <a-card :bordered="true" type="inner" title="邀请配置" style="margin: 15px 0;">
    <a-form :form="form" layout="inline">
      <!-- <a-form-item label="二维码" :label-col="{ span: 4 }" :wrapper-col="{ span: 16 }">
        <a-input
          placeholder="请输入二维码"
          @change="imgChange"
          v-decorator="['img', { initialValue: postUserData.img, rules: [{required:true, message: '请输入二维码'}] }]"
        ></a-input>
      </a-form-item> -->
      <a-form-item label="邀请码" :label-col="{ span: 3 }" :wrapper-col="{ span: 16 }" :style="{width: '100%'}">
        <a-input
          placeholder="请输入邀请码"
          @change="inviteCodeChange"
          v-decorator="['inviteCode', { initialValue: postUserData.inviteCode, rules: [{required:true, message: '请输入邀请码'}] }]"
        ></a-input>
      </a-form-item>
      <a-form-item label="安卓链接" :label-col="{ span: 6 }" :wrapper-col="{ span: 16 }">
        <a-input
          placeholder="请输入安卓下载链接"
          @change="azUrlStrChange"
          v-decorator="['azUrlStr', { initialValue: postUserData.azUrlStr, rules: [{required:true, message: '请输入安卓下载链接'}] }]"
        ></a-input>
      </a-form-item>
      

      <a-form-item label="ios链接" :label-col="{ span: 6 }" :wrapper-col="{ span: 16 }">
        <a-input
          placeholder="请输入ios下载链接"
          @change="iosUrlStrChange"
          v-decorator="['iosUrlStr', { initialValue: postUserData.iosUrlStr, rules: [{required:true, message: '请输入ios下载链接'}] }]"
        ></a-input>
      </a-form-item>
      <a-form-item label="安卓二维码" :label-col="{ span: 6 }" :wrapper-col="{ span: 16 }">
        <div class="clearfix">
          <a-upload
            :action="url + '/16zan/api/v1/images/upload'"
            :headers="{'Authorization': token }"
            list-type="picture-card"
            :file-list="fileList"
            @preview="handlePreview"
            @change="handleChange"
            v-decorator="['azImg', { initialValue: postUserData.azImg, rules: [{required:true, message: '请上传安卓二维码'}] }]"
          >
            <div v-if="fileList.length < 1">
              <a-icon type="plus" />
              <div class="ant-upload-text">
                图片上传
              </div>
            </div>
          </a-upload>
          <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
            <img alt="example" style="width: 100%" :src="previewImage" />
          </a-modal>
        </div>
      </a-form-item>
      <a-form-item label="ios二维码" :label-col="{ span: 6 }" :wrapper-col="{ span: 16 }">
        <div class="clearfix">
          <a-upload
            :action="url + '/16zan/api/v1/images/upload'"
            :headers="{'Authorization': token }"
            list-type="picture-card"
            :file-list="fileListIos"
            @preview="handlePreviewIos"
            @change="handleChangeIos"
            v-decorator="['iosImg', { initialValue: postUserData.iosImg, rules: [{required:true, message: '请上传ios二维码'}] }]"
          >
            <div v-if="fileListIos.length < 1">
              <a-icon type="plus" />
              <div class="ant-upload-text">
                图片上传
              </div>
            </div>
          </a-upload>
          <a-modal :visible="previewVisibleIos" :footer="null" @cancel="handleCancelIos">
            <img alt="example" style="width: 100%" :src="previewImageIos" />
          </a-modal>
        </div>
      </a-form-item>
      <a-form-item label="备注" :label-col="{ span: 3 }" :wrapper-col="{ span: 16 }" :style="{width: '100%'}">
        <!-- <a-input
          placeholder="请输入备注"
          @change="remarkChange"
          v-decorator="['remark', { initialValue: postUserData.remark, rules: [{required:true, message: '请输入备注'}] }]"
        ></a-input> -->
        <editor :example="postUserData.remark" :num='num' @editorActon="editorActon" />
      </a-form-item>
      <div>
          <a-button type="primary" class="marginBtn" :loading="loading" @click="AddInviteConfigAction">确定</a-button>
          <a-button @click="$router.go(-1)" class="marginBtn">返回</a-button>
      </div>
    </a-form>
    </a-card>
  </div>
</template>

<script>
import * as API from "../../api/inviteConfig";
import { url, imgUrl } from '../../utils/env-setup'
import { mapState } from 'vuex'
import editor from '../../commonComponents/editor/editor'

function getBase64(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result);
    reader.onerror = error => reject(error);
  });
}
export default {
  name: "inviteConfig",
  data() {
    return {
      form: this.$form.createForm(this),
      num: 0,
      id: null,
      loading:false,
      postUserData: {
        agentLevel: undefined,
        rebateRatio: undefined,
        rewardType: undefined
      },
      agentLevelList: [
        { value: 'ONE', label: '一级' },
        { value: 'TWO', label: '二级' },
        { value: 'THREE', label: '三级' },
      ],
      rewardTypeList: [
        { value: 'SJ_JL', label: '升级奖励' },
        { value: 'YJ_JL', label: '佣金奖励' },
      ],
      previewVisible: false,
      previewImage: '',
      fileList: [
      ],
      previewVisibleIos: false,
      previewImageIos: '',
      fileListIos: [
      ],
      url: ''
    };
  },
  components: {
    editor
  },
  computed: {
    ...mapState({
      token: state => state.user.token
    })
  },
  mounted() {
  },
  created () {
    this.id = this.$route.query.id || null
    this.id ? this.getMrechDetailList() : this.idCreate()
  },
  activated() {
  },
  methods: {
    idCreate () {
      // API.idCreate({str: 'SH-'}).then(res => {
      //   this.postUserData.merchantNo = res.data
      // })
    },
    editorActon(editorContent) {
      // console.log(editorContent, 1111)
      this.postUserData.remark = editorContent
    },
    getMrechDetailList () {
      this.num =0
      API.getPageDetial(this.id).then(res => {
        if (res.code === 200) {
          this.num = 9
          this.postUserData = res.data
          this.fileList[0]={
              uid: '-1',
              name: 'image',
              status: 'done',
              url: imgUrl + res.data.azImg,
          }
          this.fileListIos[0]={
              uid: '-1',
              name: 'image',
              status: 'done',
              url: imgUrl + res.data.iosImg,
          }
        }
      });
    },
    AddInviteConfigAction () {
      this.form.validateFields(err => {
        if (!err) {
          this.id ? this.edit() : this.add()
        }
      });
    },
    add(){
      this.loading = true
      API.addPage(this.postUserData).then(res => {
        if (res.code === 200) {
          this.$message.destroy();
          this.$message.success("邀请配置添加成功");
          this.$router.go(-1)
        }
        this.loading = false
      }).catch(()=>{
        this.loading = false
      })
    },
    edit(){
      this.loading = true
      API.editPage(this.id, this.postUserData).then(res => {
        if (res.code === 200) {
          this.$message.destroy();
          this.$message.success("邀请配置修改成功");
          this.$router.go(-1)
        }
        this.loading = false
      }).catch(()=>{
        this.loading = false
      })
    },
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text
          .toLowerCase()
          .indexOf(input.toLowerCase()) >= 0
      );
    },
    handleCancel() {
      this.previewVisible = false;
    },
    async handlePreview(file) {
      if (!file.url && !file.preview) {
        file.preview = await getBase64(file.originFileObj);
      }
      this.previewImage = file.url || file.preview;
      this.previewVisible = true;
    },
    handleChange({ fileList }) {
      this.fileList = fileList;
      if (fileList[0] && (fileList[0].status === 'done')) {
        this.postUserData.azImg = fileList[0]?fileList[0].response.data : ''
      }
    },
    handleCancelIos() {
      this.previewVisibleIos = false;
    },
    async handlePreviewIos(file) {
      if (!file.url && !file.preview) {
        file.preview = await getBase64(file.originFileObj);
      }
      this.previewImageIos = file.url || file.preview;
      this.previewVisibleIos = true;
    },
    handleChangeIos({ fileList }) {
      this.fileListIos = fileList;
      if (fileList[0] && (fileList[0].status === 'done')) {
        this.postUserData.iosImg = fileList[0]?fileList[0].response.data : ''
      }
    },
    inviteCodeChange(e) {
      this.postUserData.inviteCode = e.target.value;
    },
    azUrlStrChange(e) {
      this.postUserData.azUrlStr = e.target.value;
    },
    iosUrlStrChange(e) {
      this.postUserData.iosUrlStr = e.target.value;
    }
  }
};
</script>

